@import url('https://fonts.googleapis.com/css2?family=Smooch+Sans:wght@100&display=swap');

* {
    user-select: none;
}
body{ }
  /* background-color: black; */ 
.warheader{
  position: relative;
  height: 20em;
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 1.7rem;
  font-weight: 300;
  color: white;
}

.warheader mainbar{height: 3px; width: calc(25% / 4); background: black; display: inline-block; position: relative; margin: 0; left: 50%; bottom: -22%; transform: translate(-200%, -50%);}
.warheader mainbar[data-color='inchisa'] { background: #ffffff59; }
.warheader mainbar[data-color='rosua'] { background: #fff34aa8 }
.warheader mainbar[data-color='rosub'] { background: #fff34aa8; }
.warheader mainbar[data-color='inchisb'] { background: #ffffff59; }

.warheader .timpbg{
  margin: 0;
  position: absolute;
  top: 10.5%;;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  width: 7%;
  height: 20%;
  background-image: linear-gradient(to top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.01), rgba(255, 255, 255, 0.0));
  overflow:hidden;
  overflow-x: hidden;
  overflow-y: hidden;
}

.warheader .timpbg timer{
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  font-family: 'Smooch Sans', sans-serif;
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 0.07vw;
}
.warheader .timpbg tdisplay{
  margin: 0;
  position: absolute;
  top: 65%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  font-family: 'Smooch Sans', sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.07vw;
}
.warheader .timpbg timericn{
  margin: 0;
  position: absolute;
  top: 85%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  font-family: 'Smooch Sans', sans-serif;
  font-size: 1.0rem;
  font-weight: 700;
  letter-spacing: 0.07vw;
}

.warheader firstfaction{
  margin: 0;
  position: absolute;
  top: 17.2%;;
  left: 42%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  font-family: 'Smooch Sans', sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
}

.warheader firstfactionscore{
  margin: 0;
  position: absolute;
  top: 12.3%;;
  left: 42%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  font-family: 'Smooch Sans', sans-serif;
  font-size: 1.4rem;
  font-weight: 700;
}


.warheader secondfactionscore{
  margin: 0;
  position: absolute;
  top: 12.3%;;
  left: 58%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  font-family: 'Smooch Sans', sans-serif;
  font-size: 1.4rem;
  font-weight: 700;
}

.warheader secondfaction{
  margin: 0;
  position: absolute;
  top: 17.2%;;
  left: 58%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  font-family: 'Smooch Sans', sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
}


/* Killfeed */

@font-face {
  font-family: fontcustom;
  src: url("fontp.ttf");
}

*,
*::before,
*::after {
    margin: 0;
    user-select: none;
}

#kill-container {
    position: absolute;
    top: 40%;
    right: 2%;
    font-family: fontcustom;
}

.design {
    box-sizing: border-box;
    margin: 0.4em 0;
    color: white;
    font-weight: 200;
    padding: 0.4em 1em;
}
.ffa-players {
   margin: 0;
  position: absolute;
  top: 13%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  font-family: 'Smooch Sans', sans-serif;
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 0.07vw;
  color:white;
}

.ffa-players span{
  color:#fff34aa8;
  font-weight:1000px;
}

.distanta {
  color: #4f98b4;
  font-family: fontcustom;
  font-weight: 600;
  text-shadow: 0px 0px 0.8vh rgb(0 0 0 / 30%), 0px 0px 0.8vh rgb(0 0 0 / 28%);
}

.imagine {
  position: relative;
  transform:translateY(20%);
  max-height: 20px;
}

.kill-log {
    box-sizing: border-box;
    margin: 0.4em 0;
    color: white;
    font-weight: 200;
    padding: 0.4em 1em;
}

.win-log {
    background: linear-gradient(to right, rgba(0, 25, 0, .5), rgb(255, 123, 0), rgba(0, 25, 0, .4));
    border-radius: 5px;
    border: 1px solid black;

}

.lose-log {
    background: linear-gradient(to right, rgba(25, 0, 0, .5), rgba(100, 0, 0, .7), rgba(25, 0, 0, .4));
			border-bottom-left-radius: 4px;
			border-top-left-radius: 15px;
			border-top-right-radius: 4px;
			border-bottom-right-radius: 15px;
  border: 1px solid black;
}